<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>{$Think.lang.register_member}</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="INDEX/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="INDEX/css/main.css"/>
		<style type="text/css">
			.vip_top{
				width: 100%;
				background: #fff;
			}
			.vip_username{
				width: 100%;
				padding: 0.7em;
				position: relative;
				border-bottom: 1px solid #f2f2f2;
			}
			.vip_username span:first-child{
				width: 16%;
				display: inline-block;
			}
			input{
				font-size: 0.9em;
				width: 60% !important;
				outline: none !important;
				border: none !important;
				margin-bottom: 0 !important;
			}
			.vip_realname,.vip_phone,.vip_intro_person{
				width: 100%;
				padding: 0.7em;
				border-bottom: 1px solid #f2f2f2;
			}
			.vip_realname span,.vip_phone span,.vip_intro_person span{
				width: 16%;
				font-size: 0.9em;
				display: inline-block;
			}
			.vip_warning{
				width: 17px;
				height: 17px;
				background: url(INDEX/images/img/icon_data_important.png) center no-repeat;
				background-size: contain;
				display: inline-block;
				position: absolute;
				top: 35%;
				right: 10%;
			}
			.vip_middle{
				padding: 1em 0.5em;
				font-size: 0.7em;
				letter-spacing: 1px;
				border-bottom: 1px solid #aaa;
			}
			.vip_bottom{
				width: 95%;
				margin: 2em auto 0;
				background: #CAAB7C;
				border-radius: 5px;
				height: 40px;
				line-height: 40px;
				color: #fff;
				text-align: center;
				font-size: 0.9em;
			}
           .mui-switch{
      		width:36px;
        	height:18px;
      }
      header div{
      		top : 30%;
      }
      .mui-switch .mui-switch-handle{
      		width:20px;
        	height:20px;
        left:-4px;
        top: -3px;
      }
      .mui-switch.mui-active:before{
      	top:-3px;
        left:1px;
      }
      .mui-switch.mui-active .mui-switch-handle {
    	-webkit-transform: translate(43px,0);
    	transform: translate(20px,0);
		}
      .mui-switch:before{
      		top:-3px;
        	left:15px;
      }
		</style>
	</head>

	<body>
		<script src="INDEX/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script src="INDEX/js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>	
		<script>
			mui.init();
		</script>
		<header class="mui-bar mui-bar-nav">
			<a href="#offCanvasSide" class="right_top"></a>
			<!--<a class="mui-switch "></a>-->
			<div class="mui-switch mui-pull-right {if $think_var=='zh-cn'}mui-active{/if}" id="mySwitch">
  				<div class="mui-switch-handle"></div>
			</div>
			<h1 class="mui-title">{$Think.lang.project_title}</h1>
		</header>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<div id="header">{include file='header'/}</div>
			<div class="mui-inner-wrap">
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper mui-slide-in">
					<div class="mui-scroll">
						<div class="vip_content">
							<div class="vip_top">
								<div class="vip_username">
									<span>{$Think.lang.username}:</span>
									<input type="text" name="vip-name" id="vip-name" value="" placeholder="{$Think.lang.reg_email_input}"/>
									<span class="vip_warning"></span>
								</div>
								<div class="vip_realname">
									<span>{$Think.lang.set_user_name}:</span>
									<input type="text" name="vip_realname" id="vip_realname" value="" placeholder="{$Think.lang.reg_user_input}"/>

								</div>
								<div class="vip_phone">
									<span>{$Think.lang.set_phone}:</span>
									<input type="text" name="vip_phone" id="vip_phone" value="" placeholder="{$Think.lang.reg_phone_input}"/>

								</div>
								<div class="vip_intro_person">
									<span>{$Think.lang.referrer}:</span>
									<input type="text" name="vip_intro_person" id="vip_intro_person" value="{$res['user_name']}" readonly="readonly"/>
								</div>
							</div>
							<div class="vip_middle">{$Think.lang.reg_set_pwd}</div>
							<div class="vip_bottom">{$Think.lang.reg_submit}</div>
						</div>
					</div>
				</div>
			</div>				
		</div>
	</body>
	<script src="INDEX/js/switchover.js"></script>
	<script type="text/javascript">

		var vip_bottom = document.getElementsByClassName("vip_bottom")[0];
		vip_bottom.addEventListener("tap", function () {
			//邮箱验证
			var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
			var user_name = document.getElementById("vip-name").value;
			if (!reg.test(user_name)) {
				mui.toast("{$Think.lang.reg_false_email}");
				return false;
			}
			// 手机号验证
			var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
			//电话
			var user_tel = document.getElementById('vip_phone').value;
			var real_name = document.getElementById('vip_realname').value;
			mui.ajax("{:url('Users/register_vip')}",{
				data:{
					user_tel:user_tel,
					user_name:user_name,
					real_name:real_name
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){
					mui.toast(data["message"]);
					setTimeout(function(){
						window.location.reload();
					},1000)
				},
				error:function(xhr,type,errorThrown){
					//异常处理；
					console.log(type);
				}
			});

		})
	</script>